<!--  -->
<template>
  <div class="order_box">
      <div class="h50">
          <my-tab-bar
          title="我的订单"
          left-arrow
          @click-left="onClickLeft">
          </my-tab-bar>
      </div>
 <van-tabs v-model="status" @change="onChangeTab">
      <van-tab
        v-for="item in tabs"
        :title="item.text"
        :name="item.status"
        :key='item.id'
      >
        <!-- <myList
          :list='list'
          :loading='loading'
        /> -->
        
      </van-tab>
    </van-tabs>
    <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        @offset="300"
      >
     
        <div v-for="(item, index) in list" :key="index" class="order-item-box">
            <router-link :to="'/orderDetail/'+item.orderNo">
                <div class="order-item-header">
                    <span>订单时间：{{ item.createTime }}</span>
                    <span>{{ item.orderStatusString }}</span>
                  </div>
                  <van-card
                    v-for="one in item.newBeeMallOrderItemVOS"
                    :key="one.orderId"
                    :num="one.goodsCount"
                    :price="one.sellingPrice"
                    desc="全场包邮"
                    :title="one.goodsName"
                    :thumb="one.goodsCoverImg"
                  />
            </router-link>
         
        </div>
      </van-list>
</div>
</template>

<script>
    import myList from '../components/order/list'
    import {
        prefix
    } from '../util/areaList'
    import {
        getOrderList
    } from '@/api/index'
    export default {
        data() {
            return {
                loading: true,
                finished: false,
                // totalPage:0,
                tabId: 1,
                status: '',
                page: 1,
                list: [],
                tabs: [{
                        text: "全部",
                        status: "",
                        id: 0,
                    }, {
                        text: "待付款",
                        status: 0,
                        id: 1,
                    },

                    {
                        text: "待确认",
                        status: 1,
                        id: 2,
                    }, {
                        text: "待发货",
                        status: 2,
                        id: 3,
                    }, {
                        text: "已发货",
                        status: 3,
                        id: 4,
                    }, {
                        text: "交易完成",
                        status: 4,
                        id: 5,
                    },
                ],
            };
        },

        components: {
            myList
        },
        created() {
            this.loadData();
        },
        methods: {
            async loadData() {
                await getOrderList({
                    pageNumber: this.page,
                    status: this.status
                }).then((data) => {
                    this.loading = false;
                    this.totalPage = data.totalPage
                    console.log(data);
                    this.list = data.data.list;
                })
            },
            onClickLeft() {
                this.$router.back()
            },
            onChangeTab(name, title) {
                console.log(name, title)
                this.loading = true;
                this.status = name;
                this.loadData();

            },
            onLoad() {
                if (this.page < this.totalPage) {
                    this.page = this.page + 1;
                }
                this.loadData();
            },
            toOrderDetail(id) {
                this.$router.push({
                    path: '/orderDetail',
                    query: {
                        orderId: id
                    }
                })
            },
        },

    }
</script>
<style lang='less' scoped>
    .order-item-box {
        margin: 20px 10px;
        background-color: #fff;
        .order-item-header {
            padding: 10px 20px 0 20px;
            display: flex;
            justify-content: space-between;
        }
        /* .van-card {
            background-color: #fff;
            margin-top: 0;
        } */
        .van-card__content {
            align-items: flex-start;
            .van-card__desc {
                max-height: 20px;
                color: #646566;
                line-height: 20px;
                text-align: left;
            }
            .van-card__bottom {
                width: 100%;
                display: flex;
                justify-content: space-between;
            }
        }
    }
</style>